<template>
	<view class="u-demo-block content" :style="{background:$store.state.bgPrimaryColor}">
		<view style="width: 100%; height: 70rpx; display: flex; justify-content: space-between; align-items: center">
			<view class="header" @click="selectAddress"
				:style="{ paddingTop: navBarTop + 'px', height: navBarHeight + 'px', lineHeight: navBarHeight + 'px' }">
				<view class="title-top">
					<view class="title-text">约课</view> <u--image :showLoading="true" @click="Qrshow = true"
						src="../../../static/qrcodeNew.png" width="84rpx" height="48rpx"></u--image>
				</view>
			</view>
			<!-- <view class="" style="width: 100rpx;font-weight: 600;"> 客服: </view> -->
			<u--image :showLoading="true" @click="Qrshow = true" src="../../../static/qrcode.png" width="38rpx"
				height="38rpx" radius="0"></u--image>
		</view>
		<u-swiper :list="swipers" @change="(e) => (current = e.current)" :autoplay="false" :radius="15" :height="178"
			keyName="image">
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in swipers" :key="index"
					:class="[index === current && 'indicator__dot--active']"></view>
			</view>
		</u-swiper>
		<!-- <u-gap bgColor="transparent" height="15"></u-gap> -->
		<view class="navsBody">
			<view v-for="(item, index) in navs" :key="index" @click="linkUrl(item.url)">
				<u--image :showLoading="true" :src="item.img" width="76rpx" height="76rpx"></u--image>
				<text>{{ item.title }}</text>
			</view>
		</view>
		<view class="message_Flex" @click="getSwiper(currentSwiperContent)">
			<view class="view" style="width: 90%;margin-left: 30px;">
				<!-- <u--image :showLoading="true" src="../../../static/Home/gb.png" width="46rpx" height="48rpx"></u--image> -->
				<view style="width: 100%">
					<swiper circular :vertical="true" style="height: 50rpx; width: 100%; line-height: 50rpx"
						:autoplay="true" :interval="5000" @change="swiperChange">
						<block v-for="(item, index) in notices" :key="index">
							<swiper-item style="width: 100%; padding-left: 10rpx;">
								<!-- <swiper-item style="width: 100%; padding-left: 10rpx;" @click="getSwiper(item)"> -->
								{{ item.title || '' }}
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<view class="view">
				<view class="yuan"></view>
				<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"></u--image>
			</view>
		</view>
		<view class="listsBody">
			<!-- <u-cell-group :border="false">
				<u-cell :icon="require('../../../static/solid.png')" size="40" title="课程套餐" value=""
					:border="false"></u-cell>
			</u-cell-group> -->
			<view class="headers_title">
				<view class="view" :style="{ backgroundColor: $store.state.primaryColor }"></view>
				<text>课程列表</text>
			</view>
			<view class="listsItem">
				<view v-for="(item, index) in courseList" :key="item.id" class="listsVfor"
					@click="linkUrl(`/pages/detail/Tutorial_details?id=${item.id}`)">
					<view class="listsTop">
						<u--image :showLoading="true" :src="item.image" width="158rpx" height="156rpx" radius="20"
							mode="aspectFit"></u--image>
						<view class="lists_right">
							<view class="lists_">
								<view>
									<view class="lists_name">
										<!-- {{ item.type == 1 ? '正式课' : '试听课' }} -->
										<text>{{ item.name || '' }}</text>
									</view>
								</view>
							</view>
							<view class="NewFlex">
								<view class="lists_illustrate">
									<!-- 	<u--image :showLoading="true" src="../../../static/vip.png" width="30rpx" height="24rpx"
										radius="0"></u--image> -->
									<text>日期：{{item.date}}</text>
									<text>上课时间：{{item.start_time}}-{{item.end_time}}</text>
								</view>
								<!-- <text :style="{ color: $store.state.primaryColor }">￥{{ item.salesprice || '' }}</text> -->
								<view class="listBottom">
									<u-button text="查看" shape="circle"
										:style="{ background: $store.state.buttonColor }"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<ShowBand :info="qrcodeInfo"></ShowBand>
		</view>
		<!-- <u-popup :show="IShow" @close="IShow = false" @open="IShow = true" mode="center" round="20">
      <view class="popupBody">
        <text class="title">联系我们</text>
        <image src="../../../static/logo.png" mode="widthFix"></image>
        <text class="title">扫码添加客服微信</text>
        <view class="view">
          <u--image :showLoading="true" src="../../../static/logo.png" width="40rpx" height="40rpx"
            radius="0"></u--image>
          <text>18569511740</text>
        </view>
        <u-icon size="35" name="close-circle-fill" color="#fff" style="margin: 0px auto"
          @click="IShow = false"></u-icon>
      </view>
    </u-popup> -->
		<u-popup :show="show" @close="show = false" @open="show = true" mode="center" round="20">
			<view class="NewpopupBody">
				<text class="title">快去完成测试吧</text>
				<text class="content_text">展示独一无二的你，让老师留下深刻印象吧</text>
				<view class="but_flex">
					<button class="leftButton" :style="{'background':$store.state.cancelColor}">稍后再说</button>
					<button class="rightButton" :style="{ background: $store.state.buttonColor }">立即测试</button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="gbIshow" @close="gbIshow = false" @open="gbIshow = true" mode="center" round="20">
			<view class="NewBackpopupBody">
				<text class="title">{{noticeinfo.title || ''}}</text>
				<text class="content_text">{{noticeinfo.content || ''}}</text>
				<view class="but_flex">
					<button class="rightButton" :style="{ background: $store.state.buttonColor }"
						@click="gbIshow = false">确定</button>
				</view>
			</view>
		</u-popup>
		<view class="box">
			<u-popup :show="Qrshow" @close="Qrshow = false" @open="Qrshow = true" mode="center" round="20">
				<view class="_popupBody">
					<text class="title">联系我们</text>
					<image :src="shopdetail.kefu_qrcode_text" mode="widthFix"></image>
					<text class="tips">扫码添加客服微信</text>
					<view class="flex">
						<u-icon size="19" name="phone-fill" color="#333" style="margin:0px auto;"
							@click="Qrshow = false"></u-icon>
						<text>{{shopdetail.mobile || ''}}</text>
					</view>
					<u-icon size="35" name="close-circle-fill" color="#fff"
						style="margin:0px auto;position:absolute;left:45%;margin-top:30rpx;"
						@click="Qrshow = false"></u-icon>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import {
		userinfo
	} from '../../../api/Mine.js';
	import {
		imAuthLogin
	} from '../../../api/imInterface.js';
	import {
		banner,
		getList,
		notice,
		getConfig,
		shopDetail,
		getShopTime,
		getCourseList
	} from '../../../api/Home.js';
	import {
		getJsSdk
	} from '../../../api/Teacher.js';
	import {
		redirectUrl
	} from '../../../api/login.js';
	import ShowBand from '../../compontent/showBand.vue';
	import jWeixin from '../../../js_sdk/jweixin-module';
	export default {
		components: {
			ShowBand
		},
		data() {
			return {
				current: 0,
				IShow: false,
				Qrshow: false,
				show: false,
				gbIshow: false,
				swipers: [],
				noticesObj: {},
				courseList: [], //课程列表
				lists: [],
				commentLists: [], //评论列表
				navBarTop: null,
				navBarHeight: null,
				navs: [{
						img: '../../../static/nav1.png',
						title: '预约课程',
						url: '/pages/Tabbar/Teacher/Teacher'
					}, {
						img: '../../../static/nav2.png',
						title: '我的预约',
						url: '/pages/Mine/Schedule_courses'
					},
					// {
					// 	img: '../../../static/nav3.png',
					// 	title: '我的会员卡',
					// 	url: '/pages/Mine/MyVip'
					// }, 
					{
						img: '../../../static/nav4.png',
						title: '教材课件',
						url: '/pages/Mine/Tutorial_courses'
					}
				],
				info: {},
				notices: [],
				noticeinfo: {},
				qrcodeInfo: {},
				currentSwiperContent: {},
				shopdetail: {},
				currentPage: 1, //当前页码
				totalPage: 1, //课程列表的总页数
			};
		},
		watch: {},
		onLoad(option) {
			var _this = this;
			console.log('onLoad参数：', option);
			if (option.hasOwnProperty('shop_id') && Number(option.shop_id) > 0) uni.setStorageSync('shop_id', option
				.shop_id);
			if (option.hasOwnProperty('invitation_code')) {
				_this.getWeChatCode(option.shop_id, option.invitation_code);
				uni.setStorageSync('invitation_code', option.invitation_code);
			}
			if (option.token) {
				uni.setStorageSync('token', option.token);
				_this.share();
			}
		},
		onUnload() {},
		onReachBottom() {
			console.log("触底加载", this.currentPage)
			if (this.totalPage > this.currentPage) {
				this.currentPage += 1
				this.getCourseList()
			}
		},
		onShow(option) {
			var invitation_code = uni.getStorageSync('invitation_code') || '';
			if (uni.getStorageSync('token')) {
				this.getShopTime();
				this.getConfig();
				this.shopDetail();
				this.userinfo();
				if (uni.getStorageSync('shop_id')) {
					this.getList();
					this.notice();
				}
				if (invitation_code) {
					this.userinfo(invitation_code);
				}
			}
			this.banner();
			this.getCourseList()
			// this.getimAuthLogin();
		},
		mounted() {},
		methods: {
			/**
			@method 公众号授权登录
			**/
			async redirectUrl(shop_id = null, invitation_code = null) {
				try {
					console.log('公众号授权登录开始接收参数：');
					console.log(shop_id, invitation_code);
					const res = await redirectUrl({
						invitation_code: invitation_code ? invitation_code : uni.getStorageSync(
							'invitation_code'),
						shop_id: shop_id ? shop_id : uni.getStorageSync('shop_id')
					});
					if (res?.data) {
						console.log('shop_id,invitation_code');
						console.log(shop_id, invitation_code);
						window.location.href = res.data;
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			getWeChatCode(shop_id = null, invitation_code = null) {
				let code = this.getUrlCode('token');
				if (code == null) {
					this.redirectUrl(shop_id, invitation_code);
				} else {
					this.sendCode(code)
				}
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location
				.href) || [, ''
				])[1].replace(/\+/g, '%20')) || null
			},
			sendCode(code) {
				var th_is = this;
				var invitation_code = uni.getStorageSync('invitation_code') || '';
				uni.setStorageSync('token', code);
				if (th_is.getUrlCode('shop_id')) {
					uni.setStorageSync('shop_id', th_is.getUrlCode('shop_id'));
				}
				if (invitation_code) {
					th_is.userinfo(invitation_code);
				}
				console.log('打印code');
				console.log(code);
			},
			/**
			@method 判断门店是否到期
			**/
			async getShopTime() {
				try {
					const res = await getShopTime({
						shop_id: uni.getStorageSync('shop_id') || 1
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			swiperChange(e) {
				const current = e.detail.current;
				this.currentSwiperContent = this.notices[current];
				console.log(this.currentSwiperContent);
				//console.log('当前swiper项的内容是：' + this.currentSwiperContent);
			},
			/** 
			@method 分享
			**/
			async share() {
				try {
					var th_is = this;
					const res = await getJsSdk({
						url: '/pages/Tabbar/Home/Home'
					});
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data["appId"], // 必填，公众号的唯一标识
						timestamp: res.data["timestamp"], // 必填，生成签名的时间戳
						nonceStr: res.data["nonceStr"], // 必填，生成签名的随机串
						signature: res.data["signature"], // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(function() {
						// 分享给朋友
						jWeixin.updateAppMessageShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							type: 'link', // 分享类型,music、video或link，不填默认为link
							success: function() {
								// 分享成功回调
							}
						});
						// 分享到朋友圈
						jWeixin.updateTimelineShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							success: function() {
								// 分享成功回调
							}
						});
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			getSwiper(e) {
				if (e == "") {
					return true;
				}
				this.noticeinfo = {
					...e
				};
				this.gbIshow = true;
			},
			/**
			@method 获取配置
			**/
			async getConfig() {
				try {
					const res = await getConfig();
					this.qrcodeInfo = {
						...res.data
					};
					//this.Qrshow = true;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 门店详情
			**/
			async shopDetail() {
				try {
					const res = await shopDetail({
						shop_id: uni.getStorageSync('shop_id') || 1
					});
					this.shopdetail = {
						...res.data
					};
					// 检查是否需要显示弹框
					if (uni.getStorageSync('lastPopupDate') !== new Date().toDateString()) {
						// this.Qrshow = true;
						uni.setStorageSync('lastPopupDate', new Date().toDateString());
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 首页轮播图
			**/
			async banner() {
				try {
					const res = await banner({
						group: 'index',
						shop_id: uni.getStorageSync('shop_id') || 1
					});
					this.swipers = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 首页公告
			**/
			async notice() {
				try {
					const res = await notice({
						shop_id: uni.getStorageSync('shop_id')
					});
					this.notices = [...res.data];
					this.currentSwiperContent = res.data[0] ?? {}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			 * @method 获取课程列表
			 */
			async getCourseList() {
				try {
					const res = await getCourseList({
						shop_id: uni.getStorageSync('shop_id') || 1,
						page: this.currentPage,
						pagesize: 10,
					});
					this.courseList = [...res?.data?.data];
					this.totalPage = res?.data?.total
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 首页轮播图
			**/
			async getList() {
				try {
					const res = await getList({
						shop_id: uni.getStorageSync('shop_id')
					});
					this.lists = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			async userinfo(code = null) {
				try {
					const res = await userinfo({
						shop_id: uni.getStorageSync('shop_id'),
						invitation_code: code || uni.getStorageSync('invitation_code')
					});
					this.info = res.data;
					console.log('执行跳转');
					if (res.data.userinfocourse_category_id == 0) {
						uni.reLaunch({
							url: '/pages/Login/Registration_Problems',
						});
					}
					// console.log(res, 'sadsadas')
					// if (res.data.level_id == 0) {
					// 	uni.reLaunch({ url: '/pages/Login/Registration_Problems' })
					// }
					this.getimAuthLogin();
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			// 测试im用的
			async getimAuthLogin() {
				console.log(this.info.userinfo.id, 'this.info');
				let {
					data
				} = await imAuthLogin({
					mobile: `user_${this.info.userinfo.id}`,
					password: '123456',
					platform: 'web'
				});
				console.log(data, '@@@@@');
				uni.setStorageSync('access_token', data.type + ' ' + data.access_token);
				uni.setStorageSync('tokenWss', data.access_token);
			},
			linkUrl(e) {
				if (e == '/pages/Tabbar/Teacher/Teacher') {
					uni.switchTab({
						url: e
					});
				} else {
					uni.navigateTo({
						url: e
					});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	button::after {
		border: none;
	}

	.indicator {}

	// .box{
	// 	/deep/ .u-popup__content {
	// 		background-color: transparent;
	// 	}
	// }
	._popupBody {
		width: 500rpx;
		height: auto;
		background-color: transparent;
		position: relative;
		padding-bottom: 20rpx;

		/deep/ .u-icon {
			display: flex;
			justify-content: center;
		}

		image {
			width: 300rpx;
			height: 500rpx;
			border-radius: 20rpx;
			margin: 0px auto;
			display: block;
		}

		.title {
			display: block;
			font-size: 37rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.tips {
			display: block;
			font-size: 24rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.flex {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			// border:1px solid red;
			margin: 0px auto;
		}
	}

	.content {
		width: 100%;
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
		// height: 30vh;
		//height: 100%;
		position: relative;

		/deep/ .u-safe-bottom {
			display: none;
		}
	}

	.header {
		width: 100%;
		z-index: 9999999;
		position: relative;
		// background-color: red;
		display: flex;
		align-items: center;

		text {
			margin-left: 10rpx;
			color: #333;
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}

		.title-top {
			position: relative;
			width: 100px;

			.title-text {
				position: absolute;
				top: 0;
				left: 0;
				font-size: 30rpx;
			}

			image {
				position: absolute;
				bottom: 0;
				left: 0;
			}
		}
	}

	.NewBackpopupBody {
		width: 536rpx;
		height: 440rpx;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		background-image: url('../../../static/gb.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			display: block;
			text-align: center;
			margin-top: 170rpx;
		}

		.content_text {
			width: 90%;
			margin: 0px auto;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #999999;
			display: block;
			text-align: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.but_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.rightButton {
				width: 292rpx;
				height: 72rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				margin-top: 40rpx;
				// background-color:#267fff;
			}
		}
	}

	.NewpopupBody {
		width: 550rpx;
		height: auto;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		background-color: transparent;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 36rpx;
			color: #333333;
			display: block;
			text-align: center;
		}

		.content_text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
			display: block;
			text-align: center;
			padding-top: 30rpx;
			padding-bottom: 30rpx;
		}

		.but_flex {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.leftButton {
				width: 40%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				background-color: #efefef;
			}

			.rightButton {
				width: 40%;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				// background-color:#267fff;
			}
		}
	}

	.popupBody {
		width: 550rpx;
		height: 460rpx;
		padding-top: 40rpx;
		padding-bottom: 40rpx;
		background-color: transparent;

		.view {
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				color: 25rpx;
			}
		}

		/deep/ .u-icon {
			display: flex;
			justify-content: center;
			margin-top: 50rpx !important;
		}

		.title {
			display: block;
			text-align: center;
			margin: 0px auto;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}

		image {
			width: 50%;
			height: 400rpx;
			display: block;
			margin: 0px auto;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		button {
			margin: 0px auto;
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			border-radius: 50rpx;
			border: none;
			background-color: #fedc01;
			color: #333;
			font-weight: 500;
			margin-top: 20rpx;
		}
	}

	.message_Flex {
		width: 95%;
		height: auto;
		margin: 0px auto;
		background-image: url('../../../static/Home/gb.png');
		border-radius: 20rpx;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10rpx;
		padding: 0 40rpx;

		.view {
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #4d5962;
				margin-left: 30rpx;
			}

			.yuan {
				width: 14rpx;
				height: 14rpx;
				background: #2581FF;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.content {
		width: 95%;
		margin: 0rpx auto;
		padding: 0rpx;

		/deep/ .u-cell__value {
			color: #a8a8a8;
		}

		.navsBody {
			width: 100%;
			margin: 0px auto;
			border-radius: 20rpx;
			// background-color: #fff;
			display: flex;
			align-items: center;
			// border:1px solid red;
			justify-content: space-between;
			padding: 20rpx 0rpx 20rpx 0rpx;
			margin-top: 30rpx;

			/deep/ .u-image {
				display: block;
				margin: 0px auto;
			}

			view {
				width: 100%;

				// border:1px solid red;
				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0px auto;
				}

				text {
					font-size: 28rpx;
					text-align: center;
					display: block;
					margin: 0px auto;
					margin-top: 5rpx;
					letter-spacing: 1px;
				}
			}
		}

		.listsBody {
			width: 100%;
			margin: 0px auto;
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 0rpx 0rpx 0rpx 0rpx;
			background-color: transparent;

			.headers_title {
				width: auto;
				margin: 0px auto;
				display: flex;
				align-items: center;
				margin-top: 40rpx;
				margin-bottom: 40rpx;

				.view {
					width: 10rpx;
					height: 34rpx;
					background: #029cfe;
					border-radius: 6rpx;
				}

				.flex {
					display: flex;
					align-items: center;
				}

				text {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 34rpx;
					color: #333333;
					margin-left: 15rpx;
				}
			}

			/deep/ .u-cell__body {
				padding: 20rpx 20rpx 20rpx 20rpx;
			}

			/deep/ .u-cell__title-text {
				font-size: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
			}

			.listsItem {
				.listsVfor {
					width: 95%;
					margin: 0px auto;
					margin-bottom: 30rpx;
					padding-bottom: 30rpx;
					background-color: #fff;
					padding-top: 30rpx;
					padding-left: 30rpx;
					border-radius: 32rpx;

					.listsTop {
						width: 100%;
						display: flex;
					}

					image {
						width: 190rpx;
						min-width: 190rpx;
						height: 200rpx;
						border-radius: 15rpx;
					}

					.lists_right {
						width: 70%;
						padding-left: 20rpx;

						// border:1px solid greenyellow;
						.lists_ {
							width: auto;
							// border:1px solid red;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.listsAddress {
								text {
									display: block;
									font-size: 20rpx;
									color: #b5b5b5;
									text-align: right;
									margin-bottom: 5rpx;
								}
							}
						}

						.lists_name {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							text {
								font-size: 28rpx;
								font-weight: 500;
								color: #000000;
							}
						}

						.lists_tag {
							display: flex;
							align-items: center;
							margin-top: 15rpx;

							/deep/ .u-tag--warning--plain {
								border-color: #c3c3c3;
								margin-right: 20rpx;
							}

							/deep/ .u-tag--mini {
								margin-right: 20rpx;
							}

							/deep/ .u-tag-wrapper {
								margin-right: 10rpx;
							}
						}

						.u_flex {
							margin-top: 5rpx;

							view {
								text {
									color: #000000;
									display: block;
									font-size: 24rpx;
									font-weight: 500;
									margin-left: 10rpx;
									margin-bottom: 5rpx;
								}
							}
						}

						.NewFlex {
							display: flex;
							align-items: center;
							justify-content: flex-end;

							// margin-top: 30rpx;
							.lists_illustrate {
								width: 80%;
								font-size: 22rpx;
								display: flex;
								flex-direction: column;
								color: #888888;
							}

							text {
								// font-family: PingFangSC, PingFang SC;
								font-size: 28rpx;
								text-align: left;
								font-style: normal;
							}
						}
					}
				}
			}

			.listBottom {
				/deep/ .u-button {
					width: 165rpx;
					height: 60rpx;
					margin: 0px;
					color: #fff;
					// background-color:#2381fe;
					border: none;
					font-size: 20rpx;
					letter-spacing: 1px;
				}
			}
		}

		.listsevaluate {
			width: 100%;
			background-color: #fff;
			background: linear-gradient(180deg, #e3f2ff 0%, #ffffff 20%);
			margin: 0px auto;
			border-radius: 24rpx;

			/deep/ .u-cell__body {
				padding: 20rpx 20rpx 20rpx 20rpx;
			}

			.evaluateItem {
				width: 95%;
				margin: 0px auto;
				margin-bottom: 40rpx;
				padding-bottom: 30rpx;
			}

			.hadersFlex {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.hadersAvatar {
					display: flex;
					align-items: center;

					.view {
						margin-left: 10rpx;

						text {
							font-size: 28rpx;
							margin-bottom: 5rpx;
							display: block;
						}
					}
				}

				.time {
					color: #c1c1c1;
					font-size: 24rpx;
				}
			}

			.evaluateTag {
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				margin-bottom: 15rpx;

				/deep/ .u-tag__text {
					font-size: 20rpx;
				}

				text {
					font-size: 25rpx;
					color: #a6a8a7;
					border-color: '#f6f4f4';
					background-color: #f6f4f4;
					margin-right: 20rpx;
					font-size: 24rpx;
					// shape="circle" bgColor="#f6f4f4" color="#a6a8a7"
					// 		borderColor="#f6f4f4" style="margin-right:20;" size="mini"
				}
			}

			.evaluate {
				font-size: 29rpx;
				letter-spacing: 2rpx;
			}

			.evaluate_Image {
				display: flex;
				// justify-content: space-between;
				margin-top: 20rpx;
				margin-bottom: 20rpx;

				/deep/ .u-image {
					margin-right: 10rpx;
				}
			}

			.TA {
				width: auto;
				padding: 5rpx 10rpx 5rpx 10rpx;
				display: flex;
				align-items: center;
				background-color: #e7f3ff;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
				display: inline-block;

				text {
					font-size: 25rpx;
					color: #2a89e3;
				}

				view {
					display: flex;
					align-items: center;
				}

				.name {
					margin-left: 5rpx;
				}
			}

			.record {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 25rpx;
					color: #b6b6b6;
				}

				.record_view {
					display: flex;
					align-items: center;

					.r {
						margin-right: 50rpx;
						// border:1px solid red;
					}

					view {
						display: flex;
						align-items: center;

						text {
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
	}
</style>